<template>
	<BaseFilter class="number-range-filter" :label="label">
		<template #right>
			<u-row align="bottom"  v-if="dataList.length > 6">
				<u-icon :name="isExpand ? 'arrow-down' : 'arrow-up'" color="#999999" size="12px"
					@click="isExpand = !isExpand">
					<span style="margin-right: 5px;">{{ isExpand ? '收起' : '展开' }}</span>
				</u-icon>
			</u-row>
		</template>
		<u-row gutter="16">
			<u-col :span="12">
				<u-row class="number-input" type="flex" align="center" style="margin-top: 8px;">
					<view class="wrap">
						<input class="number" :value="minValue" type="number" @input="(min) => onChange(min, maxValue)" />
						<view class="gutter" />
						<input class="number" :value="maxValue" type="number" @input="(max) => onChange(minValue, max)" />
					</view>
				</u-row>
			</u-col>
			<u-col :span="4" v-for="data in validDataList" :key="data.id">
				<view class="select-item" @click="onItemClick(data)">
					{{ data.name}}
				</view>
			</u-col>
		</u-row>
	</BaseFilter>
</template>

<script>
	import BaseFilter from './BaseFilter.vue';

	export default {
		name: '',
		props: {
			label: {
				type: String
			},
			value: {
				type: [Array]
			},
			dataList: {
				type: Array,
				default: () => []
			}
		},
		components: {
			BaseFilter
		},
		data() {
			return {
				isExpand: false
			}
		},
		methods: {
			onChange(min, max) {
				let minValue;
				if (min) minValue = min.detail ? min.detail.value : min;
				let maxValue;
				if (max) maxValue = max.detail ? max.detail.value : max;
				minValue = (minValue !== '') ? Number(minValue) : undefined;
      	maxValue = (maxValue !== '') ? Number(maxValue) : undefined;
				this.$emit('input', [minValue, maxValue]);
				this.$emit('change', [minValue, maxValue]);
			},
			onItemClick(data) {
				this.onChange(data.min, data.max);
			}
		},
		computed: {
			validDataList() {
				if (!Array.isArray(this.dataList)) return [];
				return this.isExpand ? this.dataList : this.dataList.slice(0, 6);
			},
			minValue() {
				console.log('numberRangeFilter - value:', this.value);
				return Array.isArray(this.value) ? this.value[0] : undefined;
			},
			maxValue() {
				return Array.isArray(this.value) ? this.value[1] : undefined;
			}
		}
	}
</script>

<style scoped>
	.number-range-filter .van-icon-arrow-down:before {
		content: none;
	}

	.number-range-filter .van-icon-arrow-down:after {
		content: '\e65e';
	}

	.number-range-filter .van-icon-arrow-up:before {
		content: none;
	}

	.number-range-filter .van-icon-arrow-up:after {
		content: '\e65f';
	}

	.select-item {
		margin-top: 8px;
		height: 36px;
		line-height: 36px;
		background: #F6F7F9;
		border-radius: 4px 4px 4px 4px;
		text-align: center;
		color: #333333;
		cursor: pointer;
		box-sizing: border-box;
	}

	.gutter {
		height: 1px;
		width: 12px;
		background: #999999;
		flex-grow: 0;
		flex-shrink: 0;
		margin: 0px 6px;
	}
	
	.number-input .wrap {
		display: flex;
		align-items: center;
	}

	.number-input .number {
		height: 36px;
		background: #F6F7F9;
		border-radius: 4px;
		flex-grow: 1;
		flex-shrink: 1;
		width: calc(50% - 30rpx);
		text-align: center;
		border: none;
		color: #999999;
	}
</style>